<template>
    <div class="news">
        <div class="news_content">
            123121
        </div>
        <div class="discuss_title">精选评论</div>
        <div class="discuss">
            <div class="discuss_info">
                <div class="discuss_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                <div class="discuss_msg">
                    <div class="discuss_who">夏目</div>
                    <div class="discuss_time">2018.8.30</div>
                    <div class="discuss_say">WA,好棒啊，喜欢喜欢！</div>
                </div>
            </div>
            <div class="discuss_zan">
                <div class="zan_icon"></div><div class="num">10</div>
            </div>
        </div>
        <div class="discuss">
            <div class="discuss_info">
                <div class="discuss_img"><img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg"></div>
                <div class="discuss_msg">
                    <div class="discuss_who">夏目</div>
                    <div class="discuss_time">2018.8.30</div>
                    <div class="discuss_say">WA,好棒啊，喜欢喜欢！</div>
                </div>
            </div>
            <div class="discuss_zan active">
                <div class="zan_icon"></div><div class="num">140</div>
            </div>
        </div> 
        <div class="more">点击查看更多评论</div>    
        <div class="recom">
             <div class="recom_title">其他推荐</div>
             <div class="recom_content">
                     <div class="typea">推文</div>
                     <img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg">
                     <div class="recom_info">
                         <div class="recom_tit">就让这些零散的回忆，交织成一幕幕美丽的画卷吧，期待与你的约会</div>
                         <div class="recom_yet">浏览量 1023</div>
                     </div>
             </div>              
             <div class="recom_content">
                     <div class="typec">热销</div>
                     <img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg">
                     <div class="recom_info">
                         <div class="recom_titc">就让这些零散的回忆，交织成一幕幕美丽的画卷吧，期待</div>
                         <div class="recom_traitc"></div>
                         <div class="recom_yet">已卖 1023件</div>
                     </div>
             </div>      
             <div class="recom_content">
                     <img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg">
                     <div class="recom_info">
                         <div class="recom_titc">就让这些零散的回忆，交织成一幕幕美丽的画卷吧，期待</div>
                         <div class="recom_traitb"></div>
                         <div class="recom_yet">已卖 1023件</div>
                     </div>
             </div>  
             <div class="comment">
                 <div class="comment_input"> 
                     <input type="text" placeholder="写评论…" class="commont_write" @focus="handleinput()">
                 </div>
                 <div class="share">
                     <img src="/static/picture/news_share.png">
                     <div class="share_exp">分享</div>
                 </div>
             </div>                   
        </div>   
        <div class="container" @click="close" v-if="container"></div>
        <div class="container_info" v-if="container">
            <div class="info_top">
                <div class="cancle" @click="close">取消</div>
                <div class="info_menu">
                    <div class="surplus">{{remnant}}/200</div>
                    <div :class="[release ? 'active': '','release']">发布</div>
                </div>
            </div>
            <div class="info_content">
                <textarea class="content" placeholder="留言后由官方审核，通过后所有人可见。" maxlength="200" @input="descInput" ref="focusTextarea" v-model="desc"></textarea>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'News',
        data () {
             return {
                container:false, 
                remnant:0,
                desc:"",
                release:false,
             }
        },
        methods: {
            close(){
                this.container=false;   
            },
            open(){
                this.container=true;  
            },
            handleinput(){
                this.container=true;  
                this.$nextTick(function () {
                    this.$refs.focusTextarea.focus();
                })    
            },
            descInput(){
                this.release=true;
                var txtVal = this.desc.length;
                this.remnant = 200 - txtVal;
            }
        },
    }
</script>
<style scoped>
.discuss_title{font-size:36px;color:#000000;font-weight:600;width:698px;margin:0 auto;margin-top:36px;margin-bottom:30px;}
.discuss{display: flex;justify-content: space-between;width:698px;margin:0 auto;border-bottom:2px solid #ECECEC;padding-bottom:42px;padding-top:44px;}
.discuss_img{width:84px;height:84px;margin-right:24px;} 
.discuss_img img{width:100%;height:100%;border-radius:50%;}
.discuss_info{display: flex;justify-content: space-between;}
.discuss_msg{width:470px;}
.discuss_msg .discuss_who{font-size:28px;color:#000000;font-weight:500;}
.discuss_msg .discuss_time{color:#9B9B9B;font-size:24px;margin-top:8px;}
.discuss_msg .discuss_say{color:#000000;font-size:28px;margin-top:30px;}
.discuss_zan{color:#9B9B9B;display: flex;justify-content: space-between;}
.discuss_zan.active{color:#FE3B30;}
.discuss_zan .zan_icon{width:44px;height:44px;background:url(/static/images/nozan.png) no-repeat center center;background-size:100% 100%;}
.discuss_zan .num{line-height:44px;}
.discuss_zan.active .zan_icon{width:44px;height:44px;background:url(/static/images/zan.png) no-repeat center center;background-size:100% 100%;}
.news .more{line-height:96px;font-size:28px;color:#9B9B9B;text-align: center;width:698px;margin:0 auto;}
.recom{width:698px;margin:0 auto;}
.recom .recom_title{font-size:36px;color:#000000;font-weight:600;margin-bottom:28px;}
.recom .recom_content{display: flex;justify-content: space-between;margin-bottom:40px;position: relative;}
.recom .recom_content img{width:280px;height:240px;border-radius:16px;margin-right:28px;}
.recom .recom_content .recom_tit{font-size:28px;color:#000000;font-weight:600;margin-top:20px;margin-bottom:28px;}
.recom .recom_content .recom_titc{font-size:28px;color:#000000;font-weight:600;margin-top:20px;margin-bottom:16px;}
.recom .recom_content .recom_yet{font-size:28px;color:#9B9B9B;}
.recom_content .typea{padding:2px 14px;color:#FFF;font-size:20px;position: absolute;top:8px;left:8px;border:2px solid #FFFFFF;border-radius:20px;}
.recom_content .typec{padding:2px 14px;color:#FE3B30;font-size:20px;position: absolute;top:8px;left:8px;border:2px solid #FE3B30;border-radius:20px;}
.recom_content .recom_traitc{width:68px;height:50px;background:url(/static/images/hote_cake.png) no-repeat center center;background-size:100% 100%;margin-bottom:6px;}
.recom_content .recom_traitb{width:68px;height:50px;background:url(/static/images/hot_sell.png) no-repeat center center;background-size:100% 100%;margin-bottom:6px;}
.comment{width:100%;height:102px;display: flex;justify-content: space-between;border-top:2px solid #F2F2F2;padding-bottom:26px;}
.comment .comment_input{margin-top:22px;}
.comment .commont_write{width:576px;height:64px;border:none;background:#F8F8F8;line-height:64px;border-radius:32px;text-indent:24px;}
.comment .share{margin-top:16px;margin-right:32px;}
.comment .share img{width:44px;height:44px;}
.comment .share_exp{font-size:20px;color:#9B9B9B;text-align: center}
.container_info{width:100%;border-radius:12px 12px 0 0;position: fixed;bottom:0;z-index:99;background:#FFF;}
.container_info .cancle{color:#9B9B9B;font-size:28px;padding-left:8px; }
.container_info .info_top{width:698px;height:104px;line-height:104px;margin:0 auto;display: flex;justify-content: space-between;}
.container_info .info_menu{display: flex;justify-content: space-between;}
.container_info .info_menu .release{width:120px;height:52px;font-size:28px;border-radius:4px;background:#F8F8F8;color:#9B9B9B;line-height:52px;text-align:center;margin-top:24px;margin-left:16px;}
.container_info .info_menu .release.active{background:#FE3B30;color:#FFF;}
.container_info .info_menu .surplus{font-size:28px;color:#C6C6C6;}
.container_info .info_content{width:698px;height:204px;padding-bottom:20px;margin:0 auto;}
.container_info .info_content .content{width:100%;height:184px;border:none;border-radius:12px;background:#F8F8F8;padding-top:20px;text-indent:18px;}
.container{position: fixed;width:100%;height:100%;background:#989898;z-index:1;top: 0;left: 0; right: 0;bottom: 0;opacity:0.4;}
</style>
